/**
 * CSS Houdini Cubox Paint Worklet Styles
 * Provides CSS classes for using the cubox paint worklet
 */

/* Base cubox class using Houdini Paint API */
.cubox-houdini {
  /* Default corner properties */
  --corner-radius: 20;
  --corner-sharpness: 1;
  
  /* Individual corner properties (optional overrides) */
  /* --corner-radius-top-left: 20; */
  /* --corner-radius-top-right: 20; */
  /* --corner-radius-bottom-right: 20; */
  /* --corner-radius-bottom-left: 20; */
  
  /* --corner-sharpness-top-left: 1; */
  /* --corner-sharpness-top-right: 1; */
  /* --corner-sharpness-bottom-right: 1; */
  /* --corner-sharpness-bottom-left: 1; */
  
  /* Default styling */
  background-color: #343434;
  border-width: 0;
  border-color: transparent;
  border-style: solid;
  
  /* Use the paint worklet as background */
  background-image: paint(cubox);
  
  /* Ensure proper sizing */
  box-sizing: border-box;
  position: relative;
}

/* Variant with border */
.cubox-houdini-outlined {
  --corner-radius: 20;
  --corner-sharpness: 1;
  
  background-color: transparent;
  border-width: 1px;
  border-color: bisque;
  border-style: solid;
  
  background-image: paint(cubox);
  box-sizing: border-box;
  position: relative;
}

/* Utility classes for common corner configurations */
.cubox-sharp {
  --corner-sharpness: 0;
}

.cubox-rounded {
  --corner-sharpness: 1;
}

.cubox-small-radius {
  --corner-radius: 8;
}

.cubox-medium-radius {
  --corner-radius: 16;
}

.cubox-large-radius {
  --corner-radius: 32;
}

/* Individual corner utilities */
.cubox-sharp-top-left {
  --corner-sharpness-top-left: 0;
}

.cubox-sharp-top-right {
  --corner-sharpness-top-right: 0;
}

.cubox-sharp-bottom-right {
  --corner-sharpness-bottom-right: 0;
}

.cubox-sharp-bottom-left {
  --corner-sharpness-bottom-left: 0;
}

/* Color theme utilities */
.cubox-theme-dark {
  background-color: #343434;
  border-color: bisque;
}

.cubox-theme-light {
  background-color: #f5f5f5;
  border-color: #333;
}

.cubox-theme-primary {
  background-color: #007bff;
  border-color: #0056b3;
}

.cubox-theme-success {
  background-color: #28a745;
  border-color: #1e7e34;
}

.cubox-theme-warning {
  background-color: #ffc107;
  border-color: #e0a800;
}

.cubox-theme-danger {
  background-color: #dc3545;
  border-color: #c82333;
}

/* Hover effects */
.cubox-houdini:hover {
  transition: background-color 0.1s, border-color 0.1s;
}

/* Animation support */
@supports (background: paint(cubox)) {
  .cubox-houdini {
    transition: 
      --corner-radius 0.2s ease,
      --corner-sharpness 0.2s ease,
      background-color 0.1s ease,
      border-color 0.1s ease;
  }
}

/* Fallback for browsers that don't support Paint API */
@supports not (background: paint(cubox)) {
  .cubox-houdini,
  .cubox-houdini-outlined {
    border-radius: var(--corner-radius, 20px);
    background-image: none;
  }
}
